<script>
export default {
  name: 'TreeItem',
  components: {
    TreeItem: () => import('./TreeItem.vue') // 动态导入自身以避免循环引用
  },
  props: {
    item: Object,
    level: Number
  },
  methods: {
    // toggle() {
    //   this.item.open = !this.item.open
    // }
  }
}
</script>


<!-- TreeItem.vue -->
<template>
  <div class="tree-item" :data-level="level">
    <div class="item-content">
      <input type="checkbox" :id="item.id" v-model="item.checked" @change="$emit('change', item)" />
      <span class="custom-checkbox mr-10px"></span>
      <label :for="item.id">
        {{ item.name }}
        <span v-if="item.status" class="status">{{ item.status }}</span>
      </label>
   
    </div>
    <div class="children" v-if="item.children" :style="{ display: item.open ? 'block' : 'none' }">
      <TreeItem
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :level="level + 1"
        @change="$emit('change', $event)"
      />
    </div>
  </div>
</template>



<style scoped></style>
